<script setup>
// 接收父组件传递的参数
import { ProductService } from '@/service/ProductService';
import { onMounted, ref } from 'vue';
import { getCategoryChild } from '@/api/portal/category';
const products = ref(null);
const options = ref(['list', 'grid']);
const layout = ref('grid');
const CaseChildList = ref([]);

onMounted(async () => {
    ProductService.getProductsSmall().then((data) => {
        products.value = data.slice(0, 6);
    });
    const childRes = await getCategoryChild(4);
    CaseChildList.value = childRes.data;
});

function getSeverity(product) {
    switch (product.inventoryStatus) {
        case 'INSTOCK':
            return 'success';

        case 'LOWSTOCK':
            return 'warning';

        case 'OUTOFSTOCK':
            return 'danger';

        default:
            return null;
    }
}
</script>
<template>
    <div class="py-6 px-6 mt-0 mx-0 lg:mx-20">
        <div class="flex flex-row justify-between items-center mt-10 mb-6 px-2">
            <div class="flex items-center gap-4">
                <span class="text-3xl font-medium text-surface-900 dark:text-surface-100">案例展示</span>
                <span class="text-2xl font-regular text-surface-500 dark:text-surface-400">Case Show</span>
            </div>
            <div class="flex items-center gap-4">
                <Button label="更多" size="large" class="lg:!hidden"></Button>
                <div class="hidden lg:flex flex-auto items-center gap-4">
                    <Button as="router-link" to="/portal/pro/4" label="全部" size="large" class="whitespace-nowrap"></Button>
                    <Button as="router-link" :to="item.cate_link" :label="item.cate_name" size="large" outlined class="whitespace-nowrap" v-for="item in CaseChildList" :key="item.cate_id"></Button>
                </div>
            </div>
        </div>
        <div class="">
            <DataView :value="products" layout="grid">
                <template #grid="slotProps">
                    <div class="grid grid-cols-12 gap-4">
                        <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 p-2">
                            <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                                <div class="bg-surface-50 flex justify-center rounded p-4">
                                    <div class="relative mx-auto">
                                        <img class="rounded w-full transition-transform duration-500 ease-out hover:scale-125" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
                                    </div>
                                </div>
                                <div class="pt-6">
                                    <div class="flex flex-row justify-center items-start gap-2">
                                        <div class="text-lg font-medium mt-1">{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </DataView>
        </div>
    </div>
</template>
